import React from 'react';
import styled from '@emotion/styled';
import { FilePdfOutlined } from '@ant-design/icons';

interface MessageItemPDFProps {
	name: string;
	onPreview: () => void;
}

const MessageItemPDF: React.FC<MessageItemPDFProps> = ({ name, onPreview }) => {
	return (
		<PDFContainer>
			<Icon><FilePdfOutlined style={{ fontSize: '16px', color: '#f00' }} /></Icon>
			<NameSpan onClick={onPreview}>{name}</NameSpan>
		</PDFContainer>
	);
};

export default MessageItemPDF;

const PDFContainer = styled.div`
	height: fit-content;
	display: flex;
	justify-content: flex-start;
`;

const Icon = styled.div`
	height: 24px;
	margin-right: 5px;
`;

const NameSpan = styled.span`
	font-size: 14px;
	color: #333;
	cursor: pointer;
	word-break: break-all;
`;
